Utilisation du design réactif
Note
Dans CODESYS Visualization version 4.7.0.0 et supérieure, vous pouvez concevoir des visualisations réactives.
Un design réactif s'adapte automatiquement à la taille et à la disposition de la variante d'affichage. Qu'il s'agisse d'un ordinateur de bureau, d'un ordinateur portable, d'une tablette, d'un écran ou d'un smartphone, les spécifications de l'appareil concerné sont prises en compte et la taille et la disposition de la visualisation sont adaptées.
Pour offrir cette fonctionnalité pratique à l'utilisateur de la visualisation, vous devez configurer les variantes d'affichage et les éléments de visualisation en fonction de la taille du client. Cela est pertinent pour la visualisation Web, car il existe ici différentes tailles de client. Cependant, la fonctionnalité peut être utilisée de la même manière pour la visualisation cible.
Le design réactif est particulièrement adapté à la visualisation Web. Cependant, les paramètres de configuration doivent également être définis pour la visualisation cible ou la visualisation intégrée.
Sous le gestionnaire de visualisation, ouvrez le WebVisu objet.
Spécifiez le type de mise à l'échelle.
Sélectionnez le Fixé option de mise à l'échelle.
Et sélectionnez le Utiliser la taille du client détectée automatiquement option.
Avec le Fixé type de mise à l'échelle, le contenu de l'objet de visualisation (page principale) est affiché sans mise à l'échelle. La taille d'affichage est déterminée automatiquement.
Le
Containerla variable est reconnue dans le projet.Vous pouvez désormais configurer les éléments de visualisation comme décrit ci-dessous pour vous assurer qu'ils s'affichent déplacés ou redimensionnés en fonction du client.
Ou sélectionnez l'une des options de mise à l'échelle, Isotrope ou Anisotrope.
Dans l’arborescence des périphériques, ouvrez le gestionnaire de visualisation.
Le Taille de visualisation réactive l'option est située sur le Paramètres onglet dans le Paramètres supplémentaires groupe.
Sélectionnez l'option.
La fonctionnalité « visualisation réactive » est activée dans toute l'application.
Avec le Isotrope et Anisotrope types de mise à l'échelle, le contenu complet d'une page principale est mis à l'échelle selon la taille d'affichage fournie par le client. La taille du client est détectée automatiquement.
Vous pouvez désormais configurer les éléments de visualisation comme décrit ci-dessous pour vous assurer qu'ils sont affichés positionnés ou redimensionnés en fonction du client.
Accès à la taille du client
Pour accéder à la taille de la visualisation en cours, les variables Visu.Width et Visu.Height peuvent être insérés dans des expressions. Pour accéder à la taille du conteneur actuel, les variables Container.Width et Container.Height peuvent être insérés dans des expressions.
Pour déterminer la taille totale du client dans une visualisation profondément structurée, les variables VisuElems.CurrentClient.Width et VisuElems.CurrentClient.Height peuvent être insérés dans des expressions. Vous pouvez ensuite spécifier ces expressions dans les propriétés des éléments de visualisation.
Cela permet d'accéder à la taille totale d'un client dans une visualisation profondément structurée. Par exemple, vous pouvez choisir le format portrait ou paysage.
Pour plus d'informations, voir : Réglage optimal de la position et de la taille
Utilisation du type de mise à l'échelle « Fixe »
Avec le Fixé type de mise à l'échelle, le contenu de la visualisation est affiché sans mise à l'échelle. Cependant, les éléments sont déplacés ou redimensionnés en fonction du client s'ils sont configurés comme décrit ci-dessous.
Pour ce faire, configurez comme suit :
Mouvement absolu, Mouvement, X:
Container.Width - Visu.Width
Cela est possible grâce à S'orienter, Tracer ou Graphique cartésien XY éléments.
Pour ce faire, configurez comme suit :
Mouvement relatif, Mouvement en bas à droite, X:
Container.Width - Visu.WidthMouvement relatif, Mouvement en bas à droite, Y:
Container.Height- Visu.Height
Pour ce faire, configurez comme suit :
Mouvement absolu, Mouvement, X:
SEL(IsPortrait(Container), 0, -250)Mouvement absolu, Mouvement, Y:
SEL(IsPortrait(Container), 0, 150)
Le Invisible La propriété element permet l'affichage de nombreux éléments différents pour les différentes tailles de client.
Pour ce faire, configurez comme suit :
Variables d'état, Invisible:
IsPortrait(Container)
Utilisation du type d'échelle « Isotrope » ou « Anisotrope »
Avec les types de mise à l'échelle « isotrope » et « anisotrope », le contenu complet d'une page principale est mis à l'échelle en fonction de la taille d'affichage fournie par le client. Si l'orientation de la page d'une tablette, par exemple, passe du mode paysage au mode portrait, le contenu ne correspond pas au rapport hauteur/largeur. De grandes barres sont créées et la page ne peut pas être remplie de manière optimale.
Pour éviter cela, il était auparavant nécessaire de créer une page séparée (visualisation) pour chacun des formats portrait et paysage. Ceux-ci sont démarrés via le ClientListener avec la page de démarrage correcte. Cela peut désormais être réalisé plus facilement grâce au redimensionnement réactif sans avoir à dupliquer les objets de visualisation.
Avec le redimensionnement réactif du format paysage au format portrait, les tuiles les plus à droite sont déplacées vers le bas à droite par un mouvement absolu. La taille de page actuelle s'adapte de manière dynamique à la taille actuelle du client et les éléments sont positionnés de manière optimale à l'intérieur de celle-ci. Lors du passage du format portrait au format paysage, les éléments sont déplacés dans la direction opposée.
La page principale d'une visualisation se compose de plusieurs « tuiles » programmées avec des éléments de cadre. Ces éléments de cadre doivent être repositionnés et déplacés si l'orientation de la visualisation change et s'ils sont adaptés à la taille d'affichage actuelle.
Configurer comme suit :
Propriété: Mouvement absolu, Mouvement, X:
SEL(IsPortrait(Container), 0, -250)Propriété: Mouvement absolu, Mouvement, Y:
SEL(IsPortrait(Container), 0, 150)
Mise en œuvre de IsPortrait pour déterminer la taille de la visualisation
FUNCTION IsPortrait : BOOL
VAR_INPUT sizeProvider : VisuElems.ISizeProvider;
END_VAR
IF sizeProvider.Width < sizeProvider.Height THEN
IsPortrait := TRUE;
END_IFCalcul du mouvement dans la direction X et Y avec des expressions typiques sous la Mouvement absolu propriété:
